<!--
 * @Author: dfh
 * @Date: 2024-09-18 17:14:14
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container">
        <view class="header">
            <image src="/static/images/mainBg.png" class="header-img" />
        </view>
        <view class="time-line">
            <view class="time-line-item">
                <view class="dot"></view>
                <view class="flex flex-col ml-20">
                    <text class="txt-black-50 txt-28 txt-w-6">排队中</text>
                    <view class="flex ai-center mt-20">
                        <image src="/static/images/time.png" class="time" />
                        <text class="txt-black-black-102 txt-22 mt-10">由于聚餐内容多，您当前处于排队中，请耐心等待...</text>
                    </view>
                </view>
            </view>
            <view class="time-line-item" @click="onStatusChange(1)">
                <view class="dot"></view>
                <view class="flex flex-col ml-20">
                    <text class="txt-black-50 txt-28 txt-w-6">菜品准备中</text>
                    <view class="flex ai-center mt-20">
                        <image src="/static/images/time.png" class="time" />
                        <text class="txt-black-black-102 txt-22 mt-10">您点的菜品已在锅里，大厨正在为您精心烹饪...</text>
                    </view>
                </view>
            </view>
            <view class="time-line-item">
                <view class="dot"></view>
                <view class="flex flex-col ml-20">
                    <text class="txt-black-50 txt-28 txt-w-6">准备上菜</text>
                    <view class="flex ai-center mt-20">
                        <image src="/static/images/time.png" class="time" />
                        <text class="txt-black-black-102 txt-22 mt-10">菜品已就绪，您可以自行取餐或等待服务员送餐...</text>
                    </view>
                </view>
            </view>
            <view class="move-card" :style="{ top: topVal + 'rpx' }"></view>
        </view>
        <button class="cancel-btn">取消订单</button>
    </view>
</template>

<script setup>
import {  ref } from 'vue';
const topVal = ref(0);

const onStatusChange = (index) => {
   topVal.value = 180 * index;
}
</script>

<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: white;

    .header {
        &-img {
            width: 100%;
            height: 350rpx;
            object-fit: contain;
        }
    }

    .time-line {
        position: relative;
        border-left: 2rpx dashed #ccc;
        width: 80%;
        height: 600rpx;
        margin-left: 10%;

        &-item {
            height: 180rpx;
            display: flex;
            align-items: center;

            .dot {
                margin-left: -10rpx;
                width: 20rpx;
                height: 20rpx;
                border-radius: 10rpx;
                background-color: rgba(225, 163, 72, 1);
                box-shadow: 3rpx 4rpx 30rpx rgba(225, 163, 72, 1);
            }

            .time {
                margin-top: 6rpx;
                width: 30rpx;
                height: 30rpx;
                object-fit: contain;
                margin-right: 10rpx;
            }
        }

        .move-card {
            position: absolute;
            left: -50rpx;
            right: -50rpx;
            top: 0;
            height: 180rpx;
            border-radius: 20rpx;
            background-color: rgba(225, 163, 72, 0.3);
        }

    }
    .cancel-btn{
        position: fixed;
        bottom: 40rpx;
        left: 5%;
        right: 5%;
        width: 90%;
        height: 80rpx;
        background-color: rgba(225, 163, 72, 1);
        border-radius: 20rpx;
        color: white;
        font-size: 32rpx;
        line-height: 80rpx;
    }
}
</style>